<template>
	<view class="account-hub-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">账户管理</text>
			<view>
				<u-button v-show="user_info.role.code == 1" @click="show_add_account_model(true)" type="primary"
					shape="square" size="medium">
					创建账号
				</u-button>
			</view>
		</view>
		<u-subsection style="margin-bottom: 30rpx;" v-show="user_info.role.code == 1" active-color="#ff9900" @change="account_subsection_change" :list="account_subsection_list"
			:current="account_subsection_current"></u-subsection>

			<view style="margin: 30rpx 0; background: #f5f5f5;">
					<u-search @custom="fetchAccounts" border-color="#ff9900" placeholder="搜索名字" v-model="keyword"></u-search>
			</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 错误状态 -->
		<view v-else-if="error" class="error-container">
			<text class="error-text">{{ error }}</text>
			<u-button type="error" @click="fetchAccounts">重试</u-button>
		</view>

		<!-- 空状态 -->
		<view v-else-if="accounts.length === 0" class="empty-container">
			<text class="empty-text">暂无账户数据</text>
		</view>

		<!-- 账户列表 -->
		<view v-else class="account-list">
			
			<view @click="toggleAccountDetails(account)" v-for="account in accounts" :key="account.account_id"
				class="account-item">
				<!-- 账户基本信息 -->
				<view class="account-header">
					<u-text :lines="1" class="account-name" :text="account.username"></u-text>
				</view>

				<!-- 账户详细信息 -->
				<view class="account-details">
					<!-- 基本字段 -->


					<view class="detail-row">
						<text class="detail-label">手机号：</text>
						<text class="detail-value">{{ account.phone || '-' }}</text>
					</view>



					<view class="detail-row">
						<text class="detail-label">密码：</text>
						<text class="detail-value">{{ account.password || '-' }}</text>
					</view>



					<view class="detail-row">
						<text class="detail-label">余额：</text>
						<text
							class="detail-value balance">{{ account.balance !== undefined ? `¥${account.balance}` : '-' }}</text>
					</view>

					<view class="detail-row">
						<text class="detail-label">是否分配: </text>
						<u-text :lines="1" style="margin-left: 20rpx;"
							:type="account.current_owner != null ? 'success' : 'warning'"
							:text="account.current_owner != null ? '是' : '否'" class="detail-value"></u-text>
					</view>


				</view>


			</view>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop"></u-back-top>
	<u-popup v-model="add_account_model" mode="center" border-radius="14" closeable>

		<u-form class="add_account_form" :model="add_account_form" ref="uadd_account_form_ref">
			<u-text text="创建账号表单" type="primary"></u-text>
			<u-form-item label="名称"><u-input v-model="add_account_form.username" /></u-form-item>
			<u-form-item label="密码"><u-input password-icon v-model="add_account_form.password"
					type="password" /></u-form-item>
			<u-form-item label-width="100" label="手机号"><u-input password-icon v-model="add_account_form.phone"
					type="number" /></u-form-item>
			<view style="display: flex;justify-content: space-between;">
				<u-button @click="show_add_account_model(false)" size="medium" type="default">取消</u-button>
				<u-button @click="add_account" size="medium" type="primary">确定</u-button>
			</view>
		</u-form>
	</u-popup>
	<u-top-tips ref="uTipsRef"></u-top-tips>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		getAccountList,
		SERVER_BASE_URL,
		createAccount
	} from '@/static/apis/wzry';

	import {
		readLocalStorage,
		isEqual
	} from '@/static/js/hub'
	// import { base64Convert } from '@/static/js/hub';



	import {
		onPageScroll
	} from '@dcloudio/uni-app';

	// 响应式数据
	const keyword = ref("")
	const accounts = ref([]);
	const scrollTop = ref(0);
	const loading = ref(false);
	const error = ref('');
	const add_account_model = ref(false);
	const uadd_account_form_ref = ref();
	const uTipsRef = ref()
	const user_info = ref(readLocalStorage('userInfo'))
	const account_subsection_list = ref([
		"未分配",
		"已分配"
	])
	const account_subsection_list_map = ref({
		"未分配": "unassigned",
		"已分配": "assigned"
	})
	const account_subsection_current = ref(user_info.value.role.code == 1 ? 0 : 1);
	const add_account_form = ref({
		username: "",
		password: "",
		phone: ""
	})

	function account_subsection_change(index) {
		console.log(index);
		account_subsection_current.value = index;
		fetchAccounts();
	}



	function toggleAccountDetails(account) {
		console.log(account);
		uni.navigateTo({
			url: '/pages/account_platform/account_platform?account_id=' + account.account_id
		});
	}


	// 显示创建账号弹窗
	function show_add_account_model(value) {
		add_account_model.value = value;
	}

	// 确定创建账号
	async function add_account() {
		try {
			const create_account_response = await createAccount(add_account_form.value);
			console.log("创建情况: ", create_account_response);
			uTipsRef.value.show({
				title: create_account_response.message,
				type: create_account_response.code == 0 ? 'success' : 'error',
				duration: '2300'
			});
			add_account_model.value = false;
			fetchAccounts()
		} catch (err) {
			console.log("发生错误: ", err);
			uTipsRef.value.show({
				title: err.message,
				type: err.code == 0 ? 'success' : 'error',
				duration: '1300'
			});
		}

	}


	// 监听页面滚动事件
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});





	// 获取账户列表数据
	async function fetchAccounts() {

		try {
			// 重置状态
			// loading.value = true;
			error.value = '';

			// 调用API获取数据
			const response = await getAccountList({
				status: account_subsection_list_map.value[account_subsection_list.value[
					account_subsection_current.value]],
				keyword: keyword.value
			});

			// 处理API响应
			if (response && response.code === 0) {
				accounts.value = response.data;
			} else {
				error.value = response?.message || '获取账户列表失败';
				console.warn('获取账户列表失败:', response);
			}


		} catch (err) {
			// 错误处理
			error.value = '网络错误，请检查网络连接';
			console.error('API调用失败:', err);

		} finally {
			loading.value = false;
		}
	}






	// 组件挂载时获取数据
	onMounted(() => {
		fetchAccounts();
	});
</script>

<style scoped lang="scss">
	/* 主容器样式 */
	.account-hub-container {
		padding: 16px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 页面标题样式 */
	.page-header {
		margin-bottom: 20px;
		padding-bottom: 12px;
		border-bottom: 2px solid #e0e0e0;
		display: flex;
		justify-content: space-between;
	}

	.page-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	/* 加载状态样式 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 0;
	}

	.loading-spinner {
		width: 40px;
		height: 40px;
		border: 3px solid #f3f3f3;
		border-top: 3px solid #3498db;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 12px;
	}

	.loading-text {
		color: #666;
		font-size: 14px;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 错误状态样式 */
	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 0;
		text-align: center;
	}

	.error-text {
		color: #e74c3c;
		font-size: 14px;
		margin-bottom: 16px;
	}



	/* 空状态样式 */
	.empty-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 60px 0;
		color: #999;
		font-size: 14px;
	}

	/* 账户列表样式 */
	.account-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* 账户条目样式 */
	.account-item {
		background-color: white;
		border-radius: 8px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: box-shadow 0.3s ease;
	}

	.account-item:active {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* 账户头部样式 */
	.account-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid #f0f0f0;
	}

	.account-name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}


	/* 账户详细信息样式 */
	.account-details {
		margin-bottom: 16px;
	}

	.detail-row {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 14px;
	}

	.detail-row:last-child {
		margin-bottom: 0;
	}

	.detail-label {
		color: #666;
		width: 60px;
		flex-shrink: 0;
	}

	.detail-value {
		color: #333;
		flex: 1;
		word-break: break-all;
	}

	.detail-value.balance {
		color: #e74c3c;
		font-weight: bold;
	}



	.add_account_form {
		padding: 60rpx 30rpx;
	}
</style>